<template>
   <div class="address-item">
      <!-- 地址信息 -->
      <div class="info" @click="hadnlerEvent">
         <p class="name">姓名：{{item.realname}}</p>
         <p class="tel">电话：{{item.phone}}</p>
         <p class="address">收货地址：{{item.address}}</p>
      </div>
      <!-- 图标 -->
      <van-icon
         name="circle"
         size="22px"
         color="#c8c9cc"
         v-show="!checked"
         @click="handlerActive"
      />
      <van-icon
         name="checked"
         size="22px"
         color="rgb(238, 10, 36)"
         v-show="checked"
      />
   </div>
</template>

<script>
//vuex
import { mapMutations } from 'vuex'

export default {
   data() {
      return {
         name: '',
         tel: '',
         address: ''
      }
   },
   props: ['checked', 'index', 'id', 'item'],
   methods: {
      ...mapMutations('account', ['TOGGLE_ADDRESS_ACTIVE']),
      handlerActive() {
         this.TOGGLE_ADDRESS_ACTIVE(this.index)
      },
      editAddress() {
         alert('编辑收货地址: ' + this.id)
      },
      hadnlerEvent() {
         this.$emit('event', this.item);
      }
   }
};
</script>

<style lang="stylus" scoped>
.address-item
   cursor pointer
   position relative;
   display: flex;
   align-items: center
   background-color: #fff;
   padding: 10px 5px;
   font-size: 14px;
   &::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 0;
      width: 95%;
      height: 1px;
      background-color: rgba(7,17,27,0.1);
      transform: scaleY(0.5) translateX(-50%);
   }
   .van-icon
      width: 34px;
      text-align: center;
      cursor pointer
   .info
      flex: 1;
      padding-left: 5px;
      box-sizing: border-box;
      p { margin: 2px 0; }
</style>